<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>用户角色</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../res/css/wholesale/font.css">
  <link rel="stylesheet" href="../../res/css/wholesale/xadmin.css">
  <link rel="stylesheet" href="../../res/layui/css/layui.css">
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="../../res/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="../../res/js/wholesale/xadmin.js"></script>

  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body> 
<div class="demoTable" style="margin-top: 10px;">
    <div class="x-body">
      <div class="layui-row">
        <div class="layui-form layui-col-md12 x-so">
          <input type="text" name="buName" id="buName" placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
          <input type="text" name="roleName" id="roleName" placeholder="请输入职位" autocomplete="off" class="layui-input">
          <button class="layui-btn" data-type="reload" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
        </div>
      </div>
      <xblock>
        <button class="layui-btn" id="insert"><i class="layui-icon"></i>添加</button>
      </xblock>

<table class="layui-table" lay-data="{url:'../../listenUserRole/getAllState.action', page:true, id:'idTest'}" lay-filter="demo">
  <thead>
    <tr>
      <th lay-data="{field:'buName',align:'center'}">用户姓名</th>
      <th lay-data="{field:'roleNames',align:'center'}">角色</th>
      <th lay-data="{fixed: 'right',width:148,align:'center', toolbar: '#barDemo'}">操作</th>
    </tr>
  </thead>
</table>
 </div>
 </div>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class='layui-icon'></i>修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class='layui-icon'></i>删除</a>
</script>
<script>
layui.use('laydate', function(){
    var laydate = layui.laydate;
  });
  
layui.use('table', function(){
  var form=layui.form;
  var table = layui.table;
//监听开关操作
  form.on('switch(sexDemo)', function(obj){
    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
  	if(checked=""){
  		d.isva == 1;
  	}
  });
  //监听表格复选框选择
  table.on('checkbox(demo)', function(obj){
    console.log(obj)
  });
  //监听工具条
  table.on('tool(demo)', function(obj){
    var da = obj.data;
    //删除
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
    	layer.close(index);
        obj.del();
        var url='../../listenUserRole/delete.action';
        var data={"id":da.buId};
        $.post(url,data,function(mes){
        	if(mes.datas==1){
 			  layer.msg(mes.msg);
		    }else{
			  layer.msg("删除失败");
		    }
        },"json");
      });
    //修改
    } else if(obj.event === 'edit'){
    	layer.open({
  		  type: 2, //设置为iframe
  		  fix: false, //不固定
		  maxmin: true,
	      shadeClose: true,
	      shade:0.4,
  		  title:'修改',
  		  area: ['400px', '470px'],
  		  content: ['update.html', 'on'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
  		  ,success: function(layero, index){
  			var url='../../listenUserRole/display.action';
  	    	var data={"id":da.buId};
  	    	var body = layer.getChildFrame('body', index);
			var iframe = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
  	    	$.post(url,data,function(mes){
  	    			/* iframe.$("#id").val(mes.urId);
					iframe.$("#buId").val(mes.buId);
					iframe.$("input[name='role']").each(function(){
                           if(iframe.$(this).val()==mes.roleId){
                           	iframe.$(this).prop('checked',true); 
                           	iframe.$("#roleId").val(mes.roleId+"@");
                           }
                       }); */
					$.each(mes,function(i,item){
						iframe.$("option[name='bu']").each(function(){
							iframe.$("#buId").val(item.buId);
							if(iframe.$(this).val()!=item.buId){
	                           	iframe.$(this).prop('disabled',true);
	                        }
						})
						iframe.$("input[name='role']").each(function(){
	                           if(iframe.$(this).val()==item.roleId){
	                           	iframe.$(this).prop('checked',true); 
	                           	iframe.$("#roleId").val(iframe.$("#roleId").val()+item.roleId+"@");
	                           }
	                       });
					})
					//调用子页面渲染的方法
					iframe.load();
  	    	},"json");
  		  }  
  	  }); 
    }
  });
  
  //表单重载
  var $ = layui.$, active = {
		    reload: function(){
		      var buName = $('#buName');
		      var roleName = $('#roleName');
		      
		      //执行重载
		      table.reload('idTest', {
		        page: {
		          curr: 1 //重新从第 1 页开始
		        }
		        ,where: {
		           key: {
		        	   buName: buName.val(),
		        	   roleName: roleName.val()
		          } 
		        }
		      });
		    }
		  };
  
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
  /**
  * 增加
  */
  $('#insert').on('click', function(){
	  layer.open({
		  type: 2, //设置为iframe
		  fix: false, //不固定
		  maxmin: true,
	      shadeClose: true,
	      shade:0.4,
  		  title:'增加',
  		  area: ['400px', '470px'],
		  content: ['insert.html', 'on'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']   
	  }); 
	          
  });
});
</script>

</body>
</html>